<template>
  <div class="app-container">
    <el-card>
        <el-row>
          <el-col :span="3">
            <el-card>
              <center><img src="@/assets/logo/engine.png" style="margin-left:-10px;width:126px;height:126px;"></center>
              <div style="margin-top:20px;margin-bottom:20px;">
                <center>
                  <span style="font-size:24px;font-weight:bold;">CC引擎</span>
                </center> 
              </div>
            </el-card>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">客户端信息</span></center>
                  </div>
                  <span v-if="baseInfo!=null" style="font-size:16px;">机器名称：</span><span v-if="baseInfo.mem.hostname!=null" style="font-size:16px;"> {{ baseInfo.mem.hostname }}</span>
                  <center><hr style="margin-top:5px;margin-bottom:5px;border-color:black;width:100%;" /></center>
                  <span v-if="baseInfo!=null" style="font-size:16px;">机器IP：</span><span v-if="baseInfo.mem.ip!=null" style="font-size:16px;"> {{ baseInfo.mem.ip }}</span>
                  <center><hr style="margin-top:5px;margin-bottom:5px;border-color:black;width:100%;" /></center>
                  <span v-if="baseInfo!=null" style="font-size:16px;">操作系统：</span><span v-if="baseInfo.mem.sys_name!=null" style="font-size:16px;"> {{ baseInfo.mem.sys_name }}</span>
                  <center><hr style="margin-top:5px;margin-bottom:5px;border-color:black;width:100%;" /></center>
                  <span v-if="baseInfo!=null" style="font-size:16px;">显卡型号：</span><span v-if="baseInfo.gpu.name!=null" style="font-size:16px;"> {{ baseInfo.gpu.name }}</span>
                  <center><hr style="margin-top:5px;margin-bottom:5px;border-color:black;width:100%;" /></center>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;word-break: break-all;word-wrap: break-word;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">中台地址</span></center>
                  </div>
                  <span v-if="baseInfo.engine.cluster_ip==null" style="font-size:16px;color:red;">未加入集群</span>
                  <span v-if="baseInfo.engine.cluster_ip!=null" style="font-size:16px;">中台地址：<span>{{ baseInfo.engine.cluster_ip }}</span></span>
                  <center><hr style="margin-top:5px;margin-bottom:5px;border-color:black;width:100%;" /></center>
                
                  <br />
                  <br />
                  <br />
                  <br />
                  <div style="margin-bottom:10px;" v-if="baseInfo.engine.engine_type!=null">
                    <center>
                      <el-row>
                        <el-col :span="24">
                          <el-button type="danger" :disabled="!(baseInfo.engine.cluster_ip!=null)" @click="quitCluster()">踢出集群</el-button>
                        </el-col>
                      </el-row>
                    </center>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;word-break: break-all;word-wrap: break-word;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">工作路径</span></center>
                  </div>
                  <span v-if="baseInfo.engine.job_path==null" style="font-size:16px;color:red;">未配置工作路径</span>
                  <span v-if="baseInfo.engine.job_path!=null" style="font-size:16px;">工作路径：<span>{{ baseInfo.engine.job_path }}</span></span>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;word-break: break-all;word-wrap: break-word;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">引擎类型</span></center>
                  </div>
                  <span v-if="baseInfo.engine.engine_type==null" style="font-size:16px;color:red;">未配置引擎类型</span>
                  <span v-if="baseInfo.engine.engine_type!=null" style="font-size:16px;">引擎类型：<span>{{ baseInfo.engine.type_name }}</span></span> <br/>
                  <center><hr style="margin-top:5px;margin-bottom:5px;border-color:black;width:100%;" /></center>
                  <span v-if="baseInfo.engine.engine_status!=null" style="font-size:16px;">引擎状态：
                    <span style="color:lightgreen;font-weight:bold;font-size:16px;" v-if="baseInfo.engine.engine_status=='正常'">{{ baseInfo.engine.engine_status }}</span>
                    <span style="color:red;font-weight:bold;font-size:16px;" v-if="baseInfo.engine.engine_status=='异常'">{{ baseInfo.engine.engine_status }}</span>
                  </span>
                  <center><hr style="margin-top:5px;margin-bottom:5px;border-color:black;width:100%;" /></center>

                  <br />
                  <br />
                  <div style="margin-bottom:10px;" v-if="baseInfo.engine.engine_type!=null">
                    <center>
                      <el-row>
                        <el-col :span="8">
                          <el-button type="success" :disabled="!(baseInfo.engine.engine_status=='异常'&&baseInfo.engine.cluster_ip!=null)" @click="operateEngine('start')">启动引擎</el-button>
                        </el-col>
                        <el-col :span="8">
                          <el-button type="danger" :disabled="!(baseInfo.engine.engine_status=='正常'&&baseInfo.engine.cluster_ip!=null)" @click="operateEngine('stop')">停止引擎</el-button>
                        </el-col>
                        <el-col :span="8">
                          <el-button type="warning" @click="operateEngine('restart')">重启引擎</el-button>
                        </el-col>
                      </el-row>
                    </center>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
    </el-card>
    <el-card style="margin-top:10px;">
        <el-row>
          <el-col :span="3">
            <el-card>
              <center><img src="@/assets/logo/cpu.png" style="margin-left:-10px;width:128px;height:128px;"></center>
              <div style="margin-top:20px;margin-bottom:20px;">
                <center>
                  <span style="font-size:24px;font-weight:bold;">CPU</span>
                </center> 
              </div>
            </el-card>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">核数</span></center>
                  </div>
                  <div style="margin-top:40px;">
                    <center>
                      <span v-if="baseInfo.cpu.cpu_cores!=null" style="font-size:40px;font-weight:bold;">{{ baseInfo.cpu.cpu_cores }} 核</span>
                    </center>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">总内存</span></center>
                  </div>
                  <div style="margin-top:40px;">
                    <center>
                      <span v-if="baseInfo.mem.mem_total!=null" style="font-size:40px;font-weight:bold;">{{ baseInfo.mem.mem_total }}</span>
                    </center>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">已使用</span></center>
                  </div>
                  <div style="margin-top:40px;">
                    <center>
                      <span v-if="baseInfo.mem.mem_used!=null" style="font-size:40px;font-weight:bold;">{{ baseInfo.mem.mem_used }}</span>
                    </center>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">使用率</span></center>
                  </div>
                  <div style="margin-top:40px;">
                    <center>
                      <span v-if="baseInfo.mem.mem_use_rate!=null" style="font-size:40px;font-weight:bold;">{{ baseInfo.mem.mem_use_rate }}</span>
                    </center>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin-top:10px;">
        <el-row>
          <el-col :span="3">
            <el-card>
              <center><img src="@/assets/logo/gpu.png" style="margin-left:-10px;width:126px;height:126px;"></center>
              <div style="margin-top:20px;margin-bottom:20px;">
                <center>
                  <span style="font-size:24px;font-weight:bold;">显卡</span>
                </center> 
              </div>
            </el-card>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">总显存</span></center>
                  </div>
                  <div style="margin-top:40px;">
                    <center>
                      <span v-if="baseInfo.gpu.totalMemory!=null" style="font-size:40px;font-weight:bold;">{{ baseInfo.gpu.totalMemory }}</span>
                    </center>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">已使用</span></center>
                  </div>
                  <div style="margin-top:40px;">
                    <center>
                      <span v-if="baseInfo.gpu.usedMemory!=null" style="font-size:40px;font-weight:bold;">{{ baseInfo.gpu.usedMemory }}</span>
                    </center>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">利用率</span></center>
                  </div>
                  <div style="margin-top:40px;">
                    <center>
                      <span style="font-size:40px;font-weight:bold;" v-if="baseInfo.gpu.usageRate!=null">{{ Number(baseInfo.gpu.usageRate).toFixed(2) }}%</span>
                    </center>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="margin-left:3px;height:240px;">
                  <div slot="header" class="clearfix" >
                    <center><span style="font-weight:bold;color:#1890FF;font-size:20px;">温度</span></center>
                  </div>
                  <div style="margin-top:40px;">
                    <center>
                      <span v-if="baseInfo.gpu.temperature!=null" style="font-size:40px;font-weight:bold;">{{ baseInfo.gpu.temperature }}°</span>
                    </center>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
    </el-card>
  </div>
</template>

<script>
import { getClientInfo } from "@/api/system/engine";
import axios from "axios";

export default {
  name: "ClientDetail",
  data() {
    return {
      serverIp: null,
      hostName: null,
      clusterIp: null,
      intervalId: null,
      baseInfo: {
        mem:{
            hostname: null,
            ip: null,
            mem_left: null,
            mem_total: null,
            mem_use_rate: null,
            mem_used: null,
            sys_arch: null,
            sys_name: null,
        },
        gpu:[
            {
                name: null,
                number: null,
                temperature: null,
                totalMemory: null,
                usageRate: null,
                useableMemory: null,
                usedMemory: null,
            }
            ],
        cpu:{
            cpu_cores: null,
            cpu_degree: null,
            cpu_sum_used_rate: null,
            cpu_sys_used_rate: null,
            cpu_user_used_rate: null,
            cpu_wait_rate: null,
        },
        engine:{
            cluster_ip: null,
            engine_type: null,
            job_path: null,
        },
      }
    };
  },
  created() {
    this.serverIp = this.$route.query.serverIp;
    this.hostName = this.$route.query.hostName;
    this.initClientInfo();
    this.getClientInfo();
  },
  methods: {
    quitCluster(){
        let data = {
            server_ip: this.serverIp,
            hostname: this.hostName,
            cluster_ip: this.clusterIp,
        }
        let path = "http://" + this.serverIp + ":9500/quitCluster";
        this.$modal.confirm('是否确认将客户端: ('+this.serverIp+'['+this.hostName+']'+') 踢出集群？').then(function() {
            axios
            .post(path,data)
            .then((data) => {
            })
            .catch((response) => {
                this.$modal.error();("加入集群失败!");
            });
        }).then(() => {
            this.$modal.msgSuccess("退出集群成功");
            this.$tab.closePage().then(() => {
                this.$router.push({path:"/client"});
            });
        }).catch(() => {});
    },
    operateEngine(val){
        let data = {
          operation: val
        }
        let path = "http://" + this.serverIp + ":9500/operateEngineAction";
        var info = "";
        if(val=="start"){
          info = "是否确认启动引擎？";
        }else if(val=="stop"){
          info = "是否确认停止引擎？";
        }else if(val=="restart"){
          info = "是否确认重启引擎？";
        }
        this.$modal.confirm(info).then(function() {
            axios
            .post(path,data)
            .then((data) => {
            })
            .catch((response) => {
              this.$message.error("操作失败!");
            });
        }).then(() => {
            this.$modal.msgSuccess("操作成功");
            this.initClientInfo();
        }).catch(() => {});
    },
    initClientInfo(){
        let data = {
            serverIp: this.serverIp,
            hostName: this.hostName
        }
        getClientInfo(data).then(res =>{
            this.baseInfo = res.data;
            this.clusterIp = this.baseInfo.engine.cluster_ip;
        })
    },
    getClientInfo(){
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
            return;
        }
        // 计时器为空，操作
        this.intervalId = setInterval(() => {
            let data = {
                serverIp: this.serverIp,
                hostName: this.hostName
            }
            getClientInfo(data).then(res =>{
                this.baseInfo = res.data;
                this.clusterIp = this.baseInfo.engine.cluster_ip;
            })
        }, 10000); // 10秒
    },
  }
};
</script>
